8e:I[903690,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/0cxp4op0m1119.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/18k2gve12j479.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0-pi40mz7bqkr.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/27d-e_mtrq80p.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/16ot-3kwt24hs.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/23crm4bdujzj_.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3crl-ybxc1u5r.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/24jtal64lwnrj.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo","/chat-static/_next/static/chunks/0xfnk8tx-4t2w.js?dpl=dpl_3hJHqJizki2QG4Anj2fLMf8KWPZo"],"SWRDataProvider"] 90:T36ff,[V0_FILE]typescriptreact:file="components/kokonutui/ai-card-generation.tsx" "use client" import { useState } from "react" import { Preview } from "./preview-generation" import { ErrorGeneration } from "./error-generation" import { FormGeneration } from "./form-generation" import { HeaderGeneration } from "./header-generation" interface CardSettings { style: string backgroundColor: string lighting: string pose: string aspectRatio: string } export default function AICardGeneration() { const [showForm, setShowForm] = useState(true) const [error, setError] = useState(null) const [isLoading, setIsLoading] = useState(false) const [settings, setSettings] = useState({ style: "artistic", backgroundColor: "studio", lighting: "studio", pose: "profile", aspectRatio: "4:5", }) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setShowForm(false) setIsLoading(true) setError(null) try { await new Promise((resolve) => setTimeout(resolve, 3000)) setShowForm(false) } catch (err) { setError("Failed to generate video. Please try again.") } finally { setIsLoading(false) } } const handleBackToSettings = () => { setShowForm(true) setError(null) } return (

{error && } {showForm ? ( ) : (

{!isLoading && (

Quality 1080p

Duration 00:07

)}

) } [V0_FILE]typescriptreact:file="components/kokonutui/header-generation.tsx" export const HeaderGeneration = () => { return (

AI Portrait Generation

Create stunning portraits with AI

) } [V0_FILE]typescriptreact:file="components/kokonutui/form-generation.tsx" import { MessageCircle, Sparkles } from "lucide-react" import { SettingsGeneration } from "./settings-generation" import { Input } from "@/components/ui/input" interface VideoSettings { style: string backgroundColor: string lighting: string pose: string aspectRatio: string } interface FormProps { onSubmit: (e: React.FormEvent) => void settings: VideoSettings onSettingsChange: (settings: VideoSettings) => void } export const FormGeneration = ({ onSubmit, settings, onSettingsChange }: FormProps) => { return (

Prompt

) } [V0_FILE]typescriptreact:file="components/kokonutui/settings-generation.tsx" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Palette, Image, Sun, User, Monitor } from "lucide-react" interface VideoSettings { style: string backgroundColor: string lighting: string pose: string aspectRatio: string } interface SettingsProps { settings: VideoSettings onSettingsChange: (settings: VideoSettings) => void } export const SettingsGeneration = ({ settings, onSettingsChange }: SettingsProps) => { return (

{/* Style Select */}

Style

{/* Background Select */}

Background

{/* Lighting Select */}

Lighting

{/* Pose Select */}

Pose

{/* Quality Select */}

Quality

720p

) } [V0_FILE]typescriptreact:file="components/kokonutui/preview-generation.tsx" "use client" import { useState, useEffect } from "react" import { Loader2 } from "lucide-react" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" interface PreviewProps { isLoading: boolean imageUrl: string } export const Preview = ({ isLoading, imageUrl }: PreviewProps) => { const availableTexts = ["Creating your masterpiece...", "Finding the good colors...", "Adding the final touches..."] const [currentTextIndex, setCurrentTextIndex] = useState(0) const [progress, setProgress] = useState(0) useEffect(() => { if (!isLoading) { setProgress(0) return } const interval = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(interval) return 100 } return prev + 1 }) }, 30) return () => clearInterval(interval) }, [isLoading]) useEffect(() => { if (!isLoading) return const interval = setInterval(() => { setCurrentTextIndex((prev) => (prev + 1) % availableTexts.length) }, 1000) return () => clearInterval(interval) }, [isLoading]) return (

{isLoading ? (

{availableTexts[currentTextIndex]}

This usually takes 10-15 seconds

) : (

)}

) } [V0_FILE]typescriptreact:file="components/kokonutui/error-generation.tsx" import { AlertCircle } from "lucide-react" interface ErrorProps { error: string } export const ErrorGeneration = ({ error }: ErrorProps) => { return (

{error}

) } 84:["$","$L8e",null,{"chatId":"UITNjt0sSFj","children":["$","$L8f",null,{"data":{"@\"active-block\",\"UITNjt0sSFj\",":{"id":"b_XlZOi5aY48y","messageId":"6rT63Qpa8gtjGQWTcYJXu8YU5qTdVL73","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ai-card-generation","type":"code-project","project":"ai-card-generation"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"UITNjt0sSFj\",":false,"":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This